<template>
  <div id='tmpl'>
        <div id="postcomment">
            <h3>提交评论</h3>
            <p></p>
            <textarea placeholder = '请输入评论内容......' v-model="postcontent"></textarea>
            <mt-button size = "large" type="primary" @click="postcomment">发表</mt-button>
        </div>
        <div id="list">
            <h3>评论列表</h3>
            <p></p>
            <div v-for = "(item,index) in list">
                <div class="title">
                    <span>第{{index+1}}楼：</span>
				    <span>用户：{{item.user_name}}</span>
                    <span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD  HH:mm:ss')}}</span>               
                </div>
                <div class="mui-table-view-cell" v-text="item.content"></div>
			</div>
        </div>
		<mt-button type="danger" size="large"  plain  @click="getmore">加载更多</mt-button>
  </div>
</template>
                   
<script>
 import common from '../../kits/common.js';
 import {Toast} from 'mint-ui';

export default {  
    data () {
            return {
                pageindex:1,
                postcontent:'',
                list:[]
        };
    },
    props:['id'],
    created(){
        this.getcommentlist(this.pageindex);
    },
    methods:{
        getmore(){
            this.pageindex++;
            this.getcommentlist(this.pageindex)
        },
        getcommentlist(pageindex){
            pageindex = pageindex || 1;
            var url = common.apidomain + 'api/getcomments/'+ this.id + '?pageindex='+pageindex;
            this.$http.get(url).then(function(res){
                if(res.body.status != 0){
                    Toast(res.body.message);
                    return;
                }
                this.list =this.list.concat(res.body.message);
            });
        },
        postcomment(){
            if(this.postcontent.trim().length <= 0){
                Toast('请输入内容');
                return;
            }
             var url = common.apidomain + 'api/postcomment/'+ this.id;
             this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
                    Toast(res.body.message);
                    this.list = [{                       
                        user_name: "匿名用户",
                        add_time: new Date(),
                        content: this.postcontent                   
                    }].concat(this.list);
                    this.postcontent = "";
                    //刷新评论列表

             });
        }
    }
}
</script>
                   
<style lang="css" scoped>
        #postcomment{
            padding:5px;
        }           
        p{
            height:1px;
            width:100%;
            border-bottom: 1px solid rgba(0,0,0,.3);
        }
        #list{
            padding:5px;
        }
        .title{
            padding:5px;
			color: #6d6d72;
			font-size: 15px;
            background-color: rgba(0,0,0,.1);
		}
</style>